import 'package:flutter/material.dart';

class CustomSwitch extends StatefulWidget {
  const CustomSwitch(
      {Key? key,
      required this.initFlag,
      this.activeColor = const Color(0xFF00C3B3),
      this.inactiveColor = const Color(0xFFEBEBEB),
      this.height = 21.5,
      this.width = 35,
      this.padding = 1,
      required this.onTap})
      : super(key: key);
  final bool initFlag;
  final Color activeColor;
  final Color inactiveColor;
  final double height;
  final double width;
  final double padding;
  final Function(AnimationController) onTap;

  @override
  State<CustomSwitch> createState() => _CustomSwitchState();
}

class _CustomSwitchState extends State<CustomSwitch>
    with SingleTickerProviderStateMixin {
  late AnimationController _animationController;
  late Animation<Color?> _colorAnimation;
  late Animation<double> _animation;

  @override
  void initState() {
    _animationController = AnimationController(
        vsync: this, duration: const Duration(milliseconds: 100));
    _colorAnimation =
        ColorTween(begin: widget.inactiveColor, end: widget.activeColor)
            .animate(_animationController)
          ..addListener(() {
            setState(() {});
          });
    _animation = Tween(begin: 0.0, end: 1.0).animate(_animationController);
    if(widget.initFlag) {
      _animationController.forward();
    }
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      behavior: HitTestBehavior.opaque,
      onTap: () => widget.onTap.call(_animationController),
      child: Container(
        height: widget.height,
        width: widget.width,
        decoration: BoxDecoration(
          color: _colorAnimation.value,
          borderRadius: BorderRadius.circular(99),
        ),
        padding: EdgeInsets.all(widget.padding),
        child: LayoutBuilder(
          builder: (context, constraint) {
            double width = constraint.maxWidth;
            double diameter = constraint.maxHeight;
            double leftWidth = (width - diameter) * _animation.value;
            return Row(
              children: [
                SizedBox(
                  width: leftWidth,
                ),
                Container(
                  width: diameter,
                  height: diameter,
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(99),
                      color: Colors.white,
                      boxShadow: [
                        BoxShadow(
                            color: Colors.black.withOpacity(0.1),
                            offset: const Offset(-1, 2),
                            blurRadius: 2),
                        BoxShadow(
                            color: Colors.black.withOpacity(0.08),
                            offset: const Offset(0, 2),
                            blurRadius: 9),
                        BoxShadow(
                            color: Colors.black.withOpacity(0.2), blurRadius: 2)
                      ]),
                )
              ],
            );
          },
        ),
      ),
    );
  }
}
